<script setup>
import fanIcon from '@/assets/fan.png'
import { ref, onMounted, nextTick, computed, onUnmounted } from 'vue'
import { ElAvatar, ElCard, ElButton, ElInput, ElTabs, ElTabPane, ElScrollbar, ElDialog, ElImage, ElSelect, ElOption } from 'element-plus'
import { Picture, Close } from '@element-plus/icons-vue'

const navItems = ref([
  { icon: fanIcon, text: '全部动态' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/e3z.png', text: '蛟书先生' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/k8la.png', text: '墨海踏浪' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/kei6.png', text: '墨痴' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/2ylq.png', text: '冷雨夜' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/12/22/5x36m.png', text: '追梦人' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/l5o0.png', text: '序77' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/31wv.png', text: '开心居士' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/32s9.png', text: '南川' },
  { avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/33x3.png', text: '墨水瓶子' },
])

const posts = ref([
  {
    id: 1,
    author: '蛟书先生',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/e3z.png',
    time: '2024-12-21 18:15',
    postType: '临摹',
    tag: '刘禹锡《陋室铭》，自视不俗。',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/21/31e.jpg',
    },
    topComment: {
      user: '刘禹锡',
      content: '哥们，你这字写的真好，我看了都自愧不如。'
    },
    stats: {
      shares: 1,
      comments: 167,
      likes: '1.6万'
    }
  },

  {
    id: 2,
    author: '墨海踏浪',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/k8la.png',
    time: '2024-12-21 09:23',
    postType: '临摹',
    tag: '王羲之十七帖之十四：盐井帖，之十五：远宦帖。',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/22/482w.png',
    },
    topComment: {
      user: '书达人',
      content: '这书法也太强了，学习了！'
    },
    stats: {
      shares: 156,
      comments: 342,
      likes: '2.3万'
    }
  },

  {
    id: 3,
    author: '追梦人',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/12/22/5x36m.png',
    time: '2024-12-20 09:15',
    postType: '创作',
    tag: '何须风月三千首，且看云山一卷书。',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/22/5y8by.png',
    },
    topComment: {
      user: '墨趣书友',
      content: '终于有人讲清楚了！'
    },
    stats: {
      shares: 345,
      comments: 634,
      likes: '3.8万'
    }
  },
  {
    id: 4,
    author: '墨海踏浪',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/k8la.png',
    time: '2024-12-18 15:45',
    postType: '临摹',
    tag: '华严经',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/22/5ssgz.png',
    },
    topComment: {
      user: '小白玩家',
      content: '临摹的太好了'
    },
    stats: {
      shares: 234,
      comments: 521,
      likes: '3.1万'
    }
  },
  {
    id: 5,
    author: '冷雨夜',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/2ylq.png',
    time: '2024-12-17 10:45',
    postType: '创作',
    tag: '读书不觉已春深，一寸光阴一寸金。',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/22/48bp.png',
    },
    topComment: {
      user: '医学生小王',
      content: '通俗易懂！'
    },
    stats: {
      shares: 89,
      comments: 234,
      likes: '9.8千'
    }
  },
  {
    id: 6,
    author: '冷雨夜',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/2ylq.png',
    time: '2024-12-10 14:20',
    postType: '临摹',
    tag: '《劝学》颜真卿',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/22/5wdgg.png',
    },
    topComment: {
      user: '小恐龙爱好者',
      content: '学到了很多！'
    },
    stats: {
      shares: 178,
      comments: 445,
      likes: '1.5万'
    }
  },
  {
    id: 7,
    author: '追梦人',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/12/22/5x36m.png',
    time: '2024-12-09 08:30',
    postType: '创作',
    tag: '羡君栖隐处，云鹤游天外。',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/22/15i02d.png',
    },
    topComment: {
      user: '书法新手',
      content: '写的好清楚，能学到很多哇。'
    },
    stats: {
      shares: 456,
      comments: 892,
      likes: '4.2万'
    }
  },
  {
    id: 8,
    author: '蛟书先生',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/11/21/e3z.png',
    time: '2024-12-08 12:30',
    postType: '创作',
    tag: '日复一日甲辰十一月二十',
    video: {
      thumbnail: 'https://s1.mintiny.com/wlake/i/2024/12/22/tcd4.jpg',
    },
    topComment: {
      user: '睡神小王',
      content: '这才是生活该有的样子！'
    },
    stats: {
      shares: 23,
      comments: 156,
      likes: '1.2万'
    }
  },
])

const topics = ref([
  { title: '初学者适合练习的书法字体：楷书、行书还是隶书？', views: '13.1万浏览', comments: '490讨论' },
  { title: '如何掌握"用笔轻重"和"收笔"技巧？', views: '63.0万浏览', comments: '5604讨论' },
  { title: '毛笔的选择与保养心得分享。', views: '87.2万浏览', comments: '1643讨论' },
  { title: '黑龙江发布人虎冲突防范公告', views: '26.5万浏览', comments: '1028讨论' },
])

const showTabs = ref(false)

// 添加当前选中项的状态
const activeIndex = ref(null)

const handleNavClick = (index) => {
  if (index === 0) {
    showTabs.value = !showTabs.value
    activeIndex.value = showTabs.value ? 0 : null
  } else {
    showTabs.value = false
    activeIndex.value = index
  }
}

const topicsSidebar = ref(null)
const scrollbarHeight = ref('400px')

// 在组件挂载后获取话题区域的实际高度
onMounted(async () => {
  handleNavClick(0)
  await nextTick()
  if (topicsSidebar.value) {
    const sidebarHeight = topicsSidebar.value.offsetHeight
    scrollbarHeight.value = `${sidebarHeight}px`
  }
})

// 添加激活标签的响应式数据
const activeTab = ref('all')

// 添加筛选后的帖子计算属性
const filteredPosts = computed(() => {
  if (!activeIndex.value || activeIndex.value === 0) {
    return posts.value // 显示全部
  }
  const selectedAuthor = navItems.value[activeIndex.value].text
  return posts.value.filter(post => post.author === selectedAuthor)
})

const inputValue = ref('')  // 添加输入框的响应式数据

// 在 script setup 中添加新的数据
const newsItems = ref([
  {
    title: '"琴书和鸣——中国书法与古琴艺术展演"在南通开幕',
    source: '中国日报网',
    date: '2024-12-21',
    imageUrl: 'https://s1.mintiny.com/wlake/i/2024/12/21/o6j1.png',
    content: '12月19日，由《中国美术报》社、中共南通市委宣传部、南通大学共同主办的"时代·人民——2024中国美术...'
  },
  {
    title: '"中国书法:书写与生命"文化沙龙在柏林中国文化中心举办',
    source: '中国新闻网',
    date: '2024-12-21',
    content: '中新网柏林12月20日电 当地时间19日晚，"中国书法:书写与生命"文化沙龙在柏林中国文化中心举办。近百位中国文化爱好者共赏书法艺术之美。'
  },
  {
    title: '全环境立德树人山水龙城小学"走进书法世界"开课了',
    source: '大小新闻',
    date: '2024-12-21',
    content: '大小新闻12月20日讯（通讯员 吉志坚 姜璐）"横平竖直，笔笔正正。写好规范字，做好中国人......"'
  }
])

const dialogVisible = ref(false)
const currentNews = ref(null)

const showNewsDetail = (news) => {
  currentNews.value = news
  dialogVisible.value = true
}

// 在 script setup 中添加
const topicDialogVisible = ref(false)
const currentTopic = ref(null)

// 添加话题详情数据
const topicDetails = {
  '初学者适合练习的书法字体：楷书、行书还是隶书？': {
    content: [
      '有人说练字应该根据书法的历史演变，追溯书法发展的脚步，从古到今的练习；有人认为，书法应该从楷书练起，楷书通则诸体通；有人认为练字应该从篆书开始，先理解书法线条，感受中锋行笔，而后练习魏碑，由圆转方，而后行书楷书就简单了；当然也有人认为应该先从隶书练起，隶书入门相对简单，由简入繁比较容易……',
      '小编认为，当今书法爱好者练习书法目的相对都比较简单，并非人人都想成为书法家，只是想着业余时间练一练，陶冶情操，提升内涵罢了。明确了目的，那对应的解决方法就要相应的调整。',
      '小编认为书法初学者学习什么体不重要，坚持最重要，现在社会生活节奏比较快，人心越来越浮躁，想要认真的学好一个不挣钱的技能越来越不容易，部分人都是只能坚持一两个月，然后淘宝来的文房四宝就放着吃灰尘了。',
      '相比几种书体，隶书和篆书入门比较容易，变化也相对比较少，是现代书法爱好者的首选，而楷、行、草对于书法初学者相对不友好，好多笔法都需要花费大量的功夫才能学好、学像，所以从这个角度来看，隶书和篆书无疑是那些想要写好字的书法爱好者的最好选择。',
      '我想不管是业余书法爱好者，或者是科班书法学生都希望自己的书法学习能够成果显著，进步明显，一个适合书法初学者的书体确实也应该有这个特性，可以想象，如果一个书法初学者苦练一年还是写不出效果，还是原地不动，试问还有几人能够继续坚持下去？而隶书和篆书就符合这个特点，小编有几十个零基础成人书法学生，记得刚入门的时候是农历十二月份，当时给小编提了一个要求......',
    ],
    source: '中国书法家协会',
    date: '2024-12-21'
  },
  // 可以继续添加其他话题的详情...
}

// 添加点击话题的处理函数
const showTopicDetail = (topic) => {
  currentTopic.value = {
    title: topic.title,
    ...topicDetails[topic.title]
  }
  topicDialogVisible.value = true
}

// 在已有的响应式数据后添加
const imageDialogVisible = ref(false)
const currentImage = ref('')

// 添加图片点击处理函数
const handleImageClick = (imageUrl) => {
  currentImage.value = imageUrl
  imageDialogVisible.value = true
}

// 在现有的 script setup 中添加以下响应式数据
const showTagInput = ref(false)
const tagValue = ref('')
const previewImage = ref('')

// 添加文件上传相关的响应式数据和方法
const isUploadActive = ref(false)

const handleUploadClick = () => {
  isUploadActive.value = true
  document.getElementById('file-upload').click()
}

const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    // 创建一个临时的预览URL
    const fileUrl = URL.createObjectURL(file)
    previewImage.value = {
      name: file.name,
      url: fileUrl
    }
    showTagInput.value = true
    isUploadActive.value = true
  }
  event.target.value = ''
}

// 修改移除预览的方法
const removePreview = () => {
  previewImage.value = ''
  isUploadActive.value = false
  showTagInput.value = false
  tagValue.value = ''
}

// 添加帖子类型选择的响应式数据
const postType = ref('创作')

// 添加获取当前时间的方法
const getCurrentTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 添加定时器存储变量
const statsTimers = ref({})

// 修改发布方法
const handlePublish = () => {
  if (!tagValue.value || !previewImage.value) {
    return
  }

  const postId = Date.now()
  
  // 创建新帖子
  const newPost = {
    id: postId,
    author: '胸脯',
    avatar: 'https://s1.mintiny.com/wlake/i/2024/12/21/yhsy.jpg',
    time: getCurrentTime(),
    postType: postType.value,
    tag: tagValue.value,
    video: {
      thumbnail: previewImage.value.url,
    },
    topComment: {
      user: '爱学习的书法人',
      content: '我来学习学习！'
    },
    stats: {
      shares: 0,
      comments: 0,
      likes: '0'
    }
  }

  // 将新帖子添加到列表开头
  posts.value.unshift(newPost)

  // 设置定时器更新统计数据
  statsTimers.value[postId] = setInterval(() => {
    const post = posts.value.find(p => p.id === postId)
    if (post) {
      post.stats.shares += 1
      post.stats.comments += 2
      post.stats.likes = (parseInt(post.stats.likes.replace('万', '000').replace('千', '00')) + 3).toString()
      
      // 格式化数字显示
      if (post.stats.likes >= 10000) {
        post.stats.likes = (post.stats.likes / 10000).toFixed(1) + '万'
      } else if (post.stats.likes >= 1000) {
        post.stats.likes = (post.stats.likes / 1000).toFixed(1) + '千'
      }
    }
  }, 1000)

  // 清空输入
  tagValue.value = ''
  previewImage.value = ''
  isUploadActive.value = false
  showTagInput.value = false
}

// 在组件卸载时清除所有定时器
onUnmounted(() => {
  Object.values(statsTimers.value).forEach(timer => {
    clearInterval(timer)
  })
})
</script>

<template>
  <div class="social-media-page">
    <div class="post-input-container">
      <div class="input-row">
        <ElInput 
          v-model="tagValue" 
          placeholder="添加标题，例如：刘禹锡《陋室铭》，自视不俗。" 
          class="post-input" 
          type="text"
          clearable 
        />
        <div class="input-icons">
          <el-icon 
            :class="{ 'is-active': isUploadActive }" 
            class="upload-icon"
            @click="handleUploadClick"
          >
            <Picture />
          </el-icon>
        </div>
      </div>
      
      <!-- 隐藏的文件输入框 -->
      <input
        type="file"
        id="file-upload"
        accept="image/*"
        class="hidden-input"
        @change="handleFileUpload"
      />
      
      <!-- 底部操作栏：图片预览 + 发布按钮 -->
      <div class="action-row" v-if="previewImage">
        <div class="left-section">
          <div class="file-preview">
            <el-icon class="preview-icon"><Picture /></el-icon>
            <span class="file-name">{{ previewImage.name }}</span>
            <el-icon class="remove-icon" @click="removePreview"><Close /></el-icon>
          </div>
        </div>
        <div class="right-section">
          <el-select v-model="postType" placeholder="请选择" class="post-type-select">
            <el-option label="创作" value="创作" />
            <el-option label="临摹" value="临摹" />
          </el-select>
          <ElButton type="primary" class="publish-btn" @click="handlePublish">发布</ElButton>
        </div>
      </div>
      
      <!-- 修改无图片时的底部操作栏 -->
      <div class="action-row" v-else>
        <div></div>
        <div class="right-section">
          <el-select v-model="postType" placeholder="请选择" class="post-type-select">
            <el-option label="创作" value="创作" />
            <el-option label="临摹" value="临摹" />
          </el-select>
          <ElButton type="primary" class="publish-btn" @click="handlePublish">发布</ElButton>
        </div>
      </div>
    </div>

    <div class="nav-avatars">
      <div v-for="(item, index) in navItems" :key="index" class="nav-item"
        :class="{ 'nav-item-active': activeIndex === index }" @click="handleNavClick(index)">
        <ElAvatar v-if="item.avatar" :src="item.avatar" />
        <img v-else-if="item.icon" :src="item.icon" class="nav-icon" />
        <span class="nav-text">{{ item.text }}</span>
      </div>
    </div>

    <div v-show="showTabs && activeIndex === 0" class="main-layout">
      <div class="tabs-container content-wrapper">
        <ElTabs class="content-tabs">
          <ElTabPane label="书友社区">
            <el-scrollbar height="440px">
              <main class="content">
                <div v-for="post in filteredPosts" :key="post.id" class="post-card">
                  <div class="post-header">
                    <div class="post-header-left">
                      <ElAvatar :src="post.avatar" class="post-avatar" />
                      <div class="post-info">
                        <div class="author-name">{{ post.author }}</div>
                        <div class="post-meta">{{ post.time }} · {{ post.postType }}</div>
                      </div>
                    </div>
                    <div class="post-options">⋮</div>
                  </div>

                  <div class="post-tag">{{ post.tag }}</div>

                  <div class="video-container">
                    <el-image 
                      :src="post.video.thumbnail" 
                      class="video-thumbnail"
                      :preview-src-list="[post.video.thumbnail]"
                      :initial-index="0"
                      fit="cover"
                      @click="handleImageClick(post.video.thumbnail)"
                    />
                    <div class="video-title">{{ post.title }}</div>
                    <div class="video-description">{{ post.description }}</div>
                    <div class="video-stats">
                      <span class="video-views">
                        <i class="view-icon">▶</i>{{ post.video.views }}
                      </span>
                      <span class="video-comments">
                        <i class="comment-icon"></i>{{ post.video.comments }}
                      </span>
                    </div>
                  </div>

                  <div class="top-comment">
                    <i class="comment-icon"></i>
                    <span class="comment-user">{{ post.topComment.user }}:</span>
                    <span class="comment-content">{{ post.topComment.content }}</span>
                  </div>

                  <div class="post-stats">
                    <div class="stat-item">
                      <i class="share-icon">↗</i>
                      <span>{{ post.stats.shares }}</span>
                    </div>
                    <div class="stat-item">
                      <i class="comment-icon">💬</i>
                      <span>{{ post.stats.comments }}</span>
                    </div>
                    <div class="stat-item">
                      <i class="like-icon">👍</i>
                      <span>{{ post.stats.likes }}</span>
                    </div>
                  </div>
                </div>
              </main>
            </el-scrollbar>
          </ElTabPane>
          <ElTabPane label="书坛资讯">
            <el-scrollbar height="440px">
              <div class="news-content">
                <div v-for="(news, index) in newsItems" :key="index" class="news-item" @click="showNewsDetail(news)">
                  <div class="news-header">
                    <h3 class="news-title">{{ news.title }}</h3>
                    <div class="news-meta">
                      <span class="news-source">{{ news.source }}</span>
                      <span class="news-date">{{ news.date }}</span>
                    </div>
                  </div>
                  <div class="news-body">
                    <el-image 
                      v-if="news.imageUrl" 
                      :src="news.imageUrl" 
                      class="news-image"
                      :preview-src-list="[news.imageUrl]"
                      :initial-index="0"
                      fit="cover"
                      @click="handleImageClick(news.imageUrl)"
                    />
                    <p class="news-text">{{ news.content }}</p>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </ElTabPane>
        </ElTabs>
      </div>

      <aside class="topics-sidebar">
        <div class="topics-card">
          <h3 class="topics-title">热门话题</h3>
          <ul class="topics-list">
            <li v-for="topic in topics" :key="topic.title" class="topic-item" @click="showTopicDetail(topic)">
              <div class="topic-content">
                <div class="topic-header">
                  <span class="topic-tag">#</span>
                  <span class="topic-title">{{ topic.title }}</span>
                </div>
                <div class="topic-stats">
                  {{ topic.views }} · {{ topic.comments }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </aside>
    </div>

    <div v-show="activeIndex !== null && activeIndex !== 0" class="main-layout">
      <div class="content-wrapper">
        <el-scrollbar height="500px">
          <div class="content">
            <div v-for="post in filteredPosts" :key="post.id" class="post-card">
              <div class="post-header">
                <div class="post-header-left">
                  <ElAvatar :src="post.avatar" class="post-avatar" />
                  <div class="post-info">
                    <div class="author-name">{{ post.author }}</div>
                    <div class="post-meta">{{ post.time }} · {{ post.postType }}</div>
                  </div>
                </div>
                <div class="post-options">⋮</div>
              </div>

              <div class="post-tag">{{ post.tag }}</div>

              <div class="video-container">
                <el-image 
                  :src="post.video.thumbnail" 
                  class="video-thumbnail"
                  :preview-src-list="[post.video.thumbnail]"
                  :initial-index="0"
                  fit="cover"
                  @click="handleImageClick(post.video.thumbnail)"
                />
                <div class="video-title">{{ post.title }}</div>
                <div class="video-description">{{ post.description }}</div>
                <div class="video-stats">
                  <span class="video-views">
                    <i class="view-icon">▶</i>{{ post.video.views }}
                  </span>
                  <span class="video-comments">
                    <i class="comment-icon">💬</i>{{ post.video.comments }}
                  </span>
                </div>
              </div>

              <div class="top-comment">
                <i class="comment-icon">💬</i>
                <span class="comment-user">{{ post.topComment.user }}:</span>
                <span class="comment-content">{{ post.topComment.content }}</span>
              </div>

              <div class="post-stats">
                <div class="stat-item">
                  <i class="share-icon">↗</i>
                  <span>{{ post.stats.shares }}</span>
                </div>
                <div class="stat-item">
                  <i class="comment-icon">💬</i>
                  <span>{{ post.stats.comments }}</span>
                </div>
                <div class="stat-item">
                  <i class="like-icon">👍</i>
                  <span>{{ post.stats.likes }}</span>
                </div>
              </div>
            </div>
          </div>


        </el-scrollbar>
      </div>

      <aside class="topics-sidebar" ref="topicsSidebar">
        <div class="topics-card">
          <h3 class="topics-title">热门话题</h3>
          <ul class="topics-list">
            <li v-for="topic in topics" :key="topic.title" class="topic-item">
              <div class="topic-content">
                <div class="topic-header">
                  <span class="topic-tag">#</span>
                  <span class="topic-title">{{ topic.title }}</span>
                </div>
                <div class="topic-stats">
                  {{ topic.views }} · {{ topic.comments }}
                </div>
              </div>
            </li>
          </ul>
        </div>
      </aside>
    </div>

    <el-dialog v-model="dialogVisible" 
      width="800px" 
      class="news-dialog" 
      :show-close="true"
      :close-on-click-modal="true" 
      :close-on-press-escape="true">
      <div class="news-detail" v-if="currentNews">
        <div class="news-detail-header">
          <h2 class="news-detail-title">{{ currentNews.title }}</h2>
          <div class="news-detail-meta">
            <span class="news-detail-source">{{ currentNews.source }}</span>
            <span class="news-detail-date">{{ currentNews.date }}</span>
          </div>
        </div>
        <div class="news-detail-content">
          <p class="news-detail-text">
            12月19日，由《中国美术报》社、中共南通市委宣传部、南通大学共同主办的"时代·人民——2024中国美术报艺术季"子项目之一"琴书和鸣——中国书法与古琴艺术展演"在南通现代美术馆盛大开幕。南通市政协原副主席、南通市政协书画会执行会长储长林宣布展演开幕。开式由南通市文化广电和旅游局党组成员、副局长冯宝主持。
          </p>
          <p class="news-detail-text">
            南通市文联党组成员、副主席宋红鑫在开幕式上致辞。他指出本次展演以"琴书和鸣"为主题，旨在融合书法与古琴艺术，展现中国传统文化的独特魅力。众多书法家和古琴艺术家用毫墨与琴声共绘艺术画卷，彰显精湛技艺与深厚修养，表达对美好生活的向往及自然和谐共生理念。此次展演打破传统界限，实现跨学科艺术交流，推动文化传承与创新。相信它将激发艺术家灵感，为中国传统文化发展注入新活力。
          </p>
          <p class="news-detail-text">
            展览学术主持、文化学者、中国画学会理事、南通大学艺术学院兼职教授谢海在致辞中表示，古琴艺术与美术界、书法界渊源深厚。此次雅集意义非凡，它不仅在视听上与书法艺术形成鲜明对比，更重要的是它传承了中国文人琴棋书画的传统。在当今喧嚣时代，古老传统被割裂，文化人有责任重拾文化脉络，延续琴棋书画的文化序列，让传统文化在现代社会中重焕生机，为推动文化传承与发展贡献力量。
          </p>
          <p class="news-detail-text">
            展览策展人、��安美术学院副教授、硕士生导师、西安美院古琴协会会长、陕西省中国画研究院副院长陈斌认为，书法与古琴尽管在表现形式上各有千秋，但它们同属于时间艺术的范畴，其内在的原理与精髓相互贯通，彼此映照。这些艺术形式都巧妙地运用了点、线、面等基本元素，在时空的广阔舞台上自如地拉远或拉近视觉与听觉的感知距离，引导观众在沉浸式的艺术体验中，深切地感受到不同艺术形式交融所带来的独特魅力与深远意境。
          </p>
        </div>
      </div>
    </el-dialog>

    <el-dialog 
      v-model="topicDialogVisible"
      width="800px" 
      class="news-dialog" 
      :show-close="true"
      :close-on-click-modal="true" 
      :close-on-press-escape="true">
      <div class="news-detail" v-if="currentTopic">
        <div class="news-detail-header">
          <h2 class="news-detail-title">{{ currentTopic.title }}</h2>
          <div class="news-detail-meta">
            <span class="news-detail-source">{{ currentTopic.source }}</span>
            <span class="news-detail-date">{{ currentTopic.date }}</span>
          </div>
        </div>
        <div class="news-detail-content">
          <p v-for="(paragraph, index) in currentTopic.content" 
             :key="index" 
             class="news-detail-text">
            {{ paragraph }}
          </p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.social-media-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

.post-input-container {
  display: flex;
  flex-direction: column;
  background: white;
  padding: 10px;
  border-radius: 8px;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.tag-row {
  margin-top: 4px;
}

.preview-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.image-preview {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #eee;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-preview {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.input-icons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 15px;
}

.input-icons i {
  cursor: pointer;
  font-size: 18px;
  color: #666;
  transition: color 0.3s;
  padding: 4px;
}

.input-icons i:hover {
  color: #00aeec;
}

:deep(.el-input__wrapper) {
  padding-right: 150px;
}

:deep(.el-input__inner) {
  height: 40px;
  font-size: 14px;
}

.tag-input {
  width: 100%;
}

.nav-avatars {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding: 10px 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.nav-text {
  font-size: 12px;
  color: #666;
}

.content-tabs {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.main-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 15px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.tabs-container {
  width: 100%;
  min-width: 0;
}

.topics-sidebar {
  position: sticky;
  top: 15px;
  height: fit-content;
}

.topics-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.topics-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topic-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.topic-item:last-child {
  border-bottom: none;
}

.topic-tag {
  color: #00aeec;
  font-size: 14px;
  margin-right: 4px;
  display: inline-block;
}

.topic-title {
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  display: inline;
}

.topic-stats {
  font-size: 12px;
  color: #999;
}

.topic-item:hover {
  background-color: #f5f5f5;
}

.content {
  padding: 16px;
  width: 500px;
  margin: 0 auto;
}

.post-card {
  background: white;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
}

.post-card:last-child {
  margin-bottom: 0;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.post-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-meta {
  color: #999;
  font-size: 14px;
}

.post-options {
  color: #999;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
}

.post-tag {
  color: #333;
  font-size: 16px;
  margin-bottom: 12px;
}

.video-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  height: 180px;
  background-color: #f5f7fa;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.video-title {
  font-size: 16px;
  font-weight: bold;
  margin: 8px 0;
}

.video-description {
  color: #666;
  margin-bottom: 8px;
}

.video-stats {
  display: flex;
  gap: 16px;
  color: #999;
  font-size: 14px;
}


.top-comment {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 8px;
  margin: 8px 0;
  font-size: 14px;
  width: 100%;
}

.comment-user {
  font-weight: bold;
  margin-right: 4px;
}

.post-stats {
  display: flex;
  gap: 24px;
  color: #666;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* 添加激活状态的样式 */
.nav-item-active {
  background-color: rgba(0, 174, 236, 0.1);
  /* 浅蓝色景 */
  border-color: #00aeec;
  /* 蓝色边框 */
}

.nav-item-active .nav-text {
  color: #00aeec;
  /* 文字变为蓝色 */
}

.content-wrapper {
  background: white;
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.post-avatar {
  width: 32px;
  height: 32px;
}

.topics-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.topic-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px;
}

.topic-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topic-tag {
  color: #00aeec;
  font-size: 14px;
}

.topic-title {
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.topic-stats {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.topic-item {
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.topic-item:last-child {
  border-bottom: none;
}

.topic-item:hover {
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* Element Scrollbar 自定义样式 */
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}

:deep(.el-scrollbar__bar.is-horizontal) {
  display: none;
}

/* 修改导航栏容器样式 */
.nav-tabs {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
}

.dynamic-tabs {
  padding: 0 20px;
  width: 500px;
}

:deep(.el-tabs__nav-wrap) {
  display: flex;
  justify-content: center;
  /* 让标签页居中 */
}

:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #f0f0f0;
}

:deep(.el-tabs__item) {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  color: #666;
}

:deep(.el-tabs__item.is-active) {
  color: #00aeec;
  font-weight: bold;
}

:deep(.el-tabs__active-bar) {
  background-color: #00aeec;
  height: 3px;
  border-radius: 1.5px;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  opacity: 0.1;
}

.news-content {
  padding: 16px;
  width: 500px;
  margin: 0 auto;
}

.news-item {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
}

.news-item:last-child {
  border-bottom: none;
}

.news-header {
  margin-bottom: 12px;
}

.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.news-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
}

.news-source {
  color: #666;
}

.news-date {
  color: #999;
}

.news-body {
  display: flex;
  gap: 16px;
}

.news-image {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.news-text {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.news-item:hover {
  background-color: #f8f9fa;
}

/* 调整标签页容器宽度 */
:deep(.el-tabs) {
  width: 500px;
}

/* 确保滚动区域内容居中 */
:deep(.el-scrollbar__wrap) {
  display: flex;
  justify-content: center;
}

/* 调整帖子卡片和新闻项的宽度 */
.post-card,
.news-item {
  width: 470px;
  margin: 0 auto 12px;
}

.news-dialog {
  :deep(.el-dialog__header) {
    display: none; /* 隐藏对话框的header部分 */
  }

  :deep(.el-dialog__body) {
    padding: 40px; /* 增加内边距 */
  }
}

.news-detail {
  padding: 0;
}

.news-detail-header {
  margin-bottom: 20px;
}

.news-detail-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.news-detail-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
}

.news-detail-source {
  color: #666;
}

.news-detail-date {
  color: #999;
}

.news-detail-content {
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

.news-detail-text {
  margin: 0;
  text-align: justify;
  text-indent: 2em;
  white-space: pre-wrap;
}

/* 自定义 el-image-viewer 预览图片的样式 */
:deep(.el-image-viewer__wrapper) {
  .el-image-viewer__img {
    min-width: 450px !important; /* 设置最小宽度 */
    max-width: 80vw !important; /* 最大宽度为视窗宽度的90% */
    height: auto !important;
  }
}

.hidden-input {
  display: none;
}

.upload-icon {
  font-size: 20px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s;
  padding: 8px;
  border-radius: 4px;
}

.upload-icon:hover,
.upload-icon.is-active {
  color: #409EFF;
  background-color: #ecf5ff;
}

.input-icons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 15px;
}

.post-input-container {
  display: flex;
  flex-direction: column;
  background: white;
  padding: 10px;
  border-radius: 8px;
}

/* 其他相关样式保持不变... */

.file-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-right: 32px; /* 为叉叉图标留出空间 */
  background-color: #f5f7fa;
  border-radius: 4px;
}

.preview-icon {
  color: #409EFF;
  font-size: 16px;
}

.file-name {
  color: #606266;
  font-size: 14px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-icon {
  position: absolute;
  right: 8px;
  color: #909399;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s;
}

.remove-icon:hover {
  color: #f56c6c;
}

/* 移除旧的图片预览相关样式 */
.image-preview {
  display: none;
}

.publish-btn {
  min-width: 80px;
}

.left-section {
  display: flex;
  align-items: center;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-type-select {
  width: 100px;
}
</style>